<template>
  <div class="container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button type="primary" @click="dialogVisible = true">排产</el-button>
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
      <el-radio-button label="top">资源甘特图</el-radio-button>
      <el-radio-button label="right">资源负荷图</el-radio-button>
    </el-radio-group>
    <div>
      <vab-chart
        :init-options="initOptions"
        :option="option"
        theme="vab-echarts-theme"
      />
    </div>

    <el-dialog :close-on-click-modal="false" 
      title="订单排产"
      :visible="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="编号">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="订单编号"></el-table-column>
        <el-table-column prop="address" label="客户名称"></el-table-column>
        <el-table-column prop="address" label="下单日期"></el-table-column>
        <el-table-column prop="address" label="交付日期"></el-table-column>
        <el-table-column prop="address" label="订单优先级"></el-table-column>
        <el-table-column prop="name" label="产品信息"></el-table-column>
        <el-table-column prop="name" label="负责人"></el-table-column>
        <el-table-column prop="name" label="创建日期"></el-table-column>
      </el-table>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="排产规则">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="完成时间" name="type"></el-checkbox>
            <el-checkbox label="负载均衡" name="type"></el-checkbox>
            <el-checkbox label="优先级高订单优先" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import VabChart from '@/extra/VabChart'
  export default {
    components: {
      VabChart,
    },
    data() {
      return {
        form: {
          type: [],
        },
        dialogVisible: false,
        tabPosition: '',
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '1518 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '1111518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上2222222',
          },
        ],
        multipleSelection: [],
        initOptions: {
          renderer: 'svg',
        },
        option: {},
      }
    },
    methods: {
      handleClose(done) {
        done()
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 30px;

    :deep() {
      .echarts {
        width: 100%;
        height: 600px;
      }
    }
  }
</style>
